<ion-view title="Add Expense" >
    <ion-content padding="true" class="has-header" ng-controller="expensecontrol" has-subheader="false">
        <form name="addexpenseform" ng-submit="addexpense(expensedata)" novalidate>
            <div class="spacer" style="width: 300px; height: 32px;"></div>
            <label class="item item-input">
                <span class="input-label"><b>Detail</b></span>
                <input type="text" placeholder="enter the bill detail" ng-model="expensedata.detail" name="detail" required>
            </label>
            <div ng-show="addexpenseform.$submitted || addexpenseform.detail.$touched">
                <p ng-show="addexpenseform.detail.$error.required">please enter bill detail..</p>
            </div>
            <label class="item item-input">
                <span class="input-label"><b>Amount</b></span>
                <input type="number" number placeholder="enter the bill amount" ng-model="expensedata.amount" id="amount" name="amount" min="0.1" required />
            </label>
            <div ng-show="addexpenseform.$submitted || addexpenseform.amount.$touched">
                <p ng-show="addexpenseform.amount.$error.required">please enter bill amount..</p>
            </div>
            <p ng-show="addexpenseform.amount.$error.number">bill amount should be numeric value</p>
            <p ng-show="addexpenseform.amount.$error.min">bill amount should be greater than 0</p>
            <label class="item item-input">
                <span class="input-label"><b>Date</b></span>
                <input type="date" ng-model="expensedata.date">
            </label>
            <div class="spacer" style="width: 300px; height: 23px;"></div>
            <div class="item row" ng-click="showtagtogroup()" ng-model="expensedata.contrib">
                <span class="input-label col"><b>Tag to group</b></span><span class="col input">{{place_tagto}}</span>
            </div>
            <div class="spacer" style="width: 300px; height: 23px;"></div>
            <div class="item row" ng-click="slectspenders(addexpenseform)" ng-model="expensedata.contrib">
                <span class="input-label col"><b>Spent By</b></span><span class="col select">{{place_spentby}}</span>
            </div>
            <div class="spacer" style="width: 300px; height: 23px;"></div>
            <div class="item row" ng-click="slectapplicable(addexpenseform)">
                 <span class="input-label col"><b>Applicable to</b></span><span class="col select item-text-wrap">{{place_applicableto}}</span>
            </div>
            <div class="spacer" style="width: 300px; height: 23px;"></div>
            <button class="button button-positive button-block " type="submit">Add Expense</button>
        </form>
    </ion-content>
</ion-view>
<script id="tagtogroup.html" type="text/ng-template">
      <div class="modal">
        <ion-header-bar class="bar-positive">
                <button ng-click="hidetagtogroup()" class="button button-positive button-icon ion-ios-arrow-back"></button>
                <h1 class="title">Select a Group</h1>
        </ion-header-bar>
        <ion-content padding="true" class="has-header">
                <label ng-repeat="group in groups" ng-if="!multiSelect" class="item item-text-wrap" ng-click='validatetaggedgroup(group)'>
                    {{group.name}}
                </label>
        </ion-content>
      </div>
</script>